<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SSM整合</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        #fm1{
            font-size: 20px;
            text-align: center;
        }
        #fm1 div{
            margin: 10px;
        }
        label,input{
            font-size: 25px;
            padding: 10px;
        }
        button{
            margin-top: 10px;
            font-size: 20px;
            padding: 10px;
            color: white;
            border-radius: 10px;
            background-color: red;
        }
        fieldset{
            border: 5px solid green;
        }
        table{
            width: 80%;
            margin-top: 20px;
            border: 1px solid aqua;
        }
        .dv2{
            text-align: center;
            align-items: center;
            width: 100%;
        }

    </style>
</head>
<body>
<div>
    <!--    新增-->
    <div>
        <form id="fm1">
            <fieldset>
                <legend>录入你的入职信息：</legend>
                <div>
                    <label>姓名：</label><input name="name" placeholder="请输入姓名">
                </div>
                <div>
                    <label>公司：</label><input name="company" placeholder="请输入公司">
                </div>
                <div>
                    <label>城市：</label><input name="city" placeholder="请输入城市">
                </div>
                <div>
                    <label>薪水：</label><input name="salary" placeholder="请输入薪水">
                </div>
                <div id="dv1">
                    <button type="button" onclick="add()">新增入职信息</button>
                </div>
            </fieldset>
        </form>
    </div>

    <!--    列表-->
    <div class="dv2">
        <div><button id="btn2" onclick="refushData()">刷新数据</button></div>
        <table>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>公司</th>
                <th>城市</th>
                <th>薪水</th>
            </tr>
            <tbody id="tbdata">
            <tr>
                <td>1</td>
                <td>大龙</td>
                <td>神州数码</td>
                <td>北京</td>
                <td>18888</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript">
    function add(){
        //获取新增的参数信息
        var data=$("#fm1").serialize();
        //请求后端接口，传递数据
        $.post("api/work/add",data,function(res){
            console.log(res);
            if(res==1){
                alert("新增成功！");
                refushData();
            }
        })
    }
    function refushData(){
        $("#tbdata").html("");
        $.get("api/work/all",function(res){
            console.log(res);
            for(i in res){
                var w=res[i];
                $("#tbdata").append("<tr><td>"+w.id+"</td><td>"+w.name+"</td><td>"+w.company+"</td><td>"+w.city+"</td><td>"+w.salary+"</td></tr>")
            }
        })
    }
</script>
</body>
</html>